<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>

  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<meta http-equiv="x-ua-compatible" content="ie=edge">

  	<title>宠物</title>
  	<link rel="shortcut icon" href="/assets/images/favourite_icon.svg">

  	<!-- fraimwork - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">

    <!-- icon font - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/stroke-gap-icons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/icofont.css">

    <!-- animation - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/animate.css">

    <!-- carousel - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/slick-theme.css">

    <!-- popup - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/magnific-popup.css">

    <!-- jquery-ui - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/jquery-ui.css">

    <!-- select option - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/nice-select.css">

    <!-- custom - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">

  </head>


  <body>

    <!-- body_wrap - start -->
    <div class="body_wrap">

      <!-- backtotop - start -->
      <div class="backtotop">
        <a href="#" class="scroll">
          <i class="far fa-arrow-up"></i>
        </a>
      </div>
      <!-- backtotop - end -->

      <!-- preloader - start -->
      <div id="preloader"></div>
      <!-- preloader - end -->

      <!-- header_section - start
      ================================================== -->
      <div th:replace="~{pet/common::common_header}"></div>
      <!-- header_section - end
      ================================================== -->

      <!-- main body - start
      ================================================== -->
      <main>

        <!-- sidebar cart - start
        ================================================== -->
        <div class="sidebar-menu-wrapper">
          <div class="cart_sidebar">
            <button type="button" class="close_btn"><i class="fal fa-times"></i></button>

            <ul class="cart_items_list ul_li_block mb_30 clearfix">
              <li>
                <div class="item_image">
                  <img src="/assets/images/cart_img_1.webp"  alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
              <li>
                <div class="item_image">
                  <img src="/assets/images/cart_img_2.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
              <li>
                <div class="item_image">
                  <img src="/assets/images/cart_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
            </ul>

            <ul class="total_price ul_li_block mb_30 clearfix">
              <li>
                <span>Subtotal:</span>
                <span>$90</span>
              </li>
              <li>
                <span>Vat 5%:</span>
                <span>$4.5</span>
              </li>
              <li>
                <span>Discount 20%:</span>
                <span>- $18.9</span>
              </li>
              <li>
                <span>Total:</span>
                <span>$75.6</span>
              </li>
            </ul>

            <ul class="btns_group ul_li_block clearfix">
              <li><a class="btn btn_primary" href="cart.html">View Cart</a></li>
              <li><a class="btn btn_secondary" href="res.html">Checkout</a></li>
            </ul>
          </div>

          <div class="cart_overlay"></div>
        </div>
        <!-- sidebar cart - end
        ================================================== -->

        <!-- product quick view modal - start
        ================================================== -->
        <div class="modal fade" id="quickview_popup" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">Product Quick View</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="product_details">
                  <div class="container">
                    <div class="row">
                      <div class="col col-lg-6">
                        <div class="product_details_image p-0">
                          <img src="/assets/images/product_details_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="product_details_content">
                          <h2 class="item_title">CURREN 8109 Watches</h2>
                          <p>
                            It is a long established fact that a reader will be distracted eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate
                          </p>
                          <div class="item_review">
                            <ul class="rating_star ul_li">
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                            <span class="review_value">3 Rating(s)</span>
                          </div>
                          <div class="item_price">
                            <span>$620.00</span>
                            <del>$720.00</del>
                          </div>

                          <hr>

                          <div class="item_attribute">
                            <h3 class="title_text">Options <span class="underline"></span></h3>
                            <form action="javascript:;">
                              <div class="row">
                                <div class="col col-md-6">
                                  <div class="select_option clearfix">
                                    <h4 class="input_title">Size *</h4>
                                    <select>
                                      <option data-display="- Please select -">Choose A Option</option>
                                      <option value="1">Some option</option>
                                      <option value="2">Another option</option>
                                      <option value="3" disabled="">A disabled option</option>
                                      <option value="4">Potato</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col col-md-6">
                                  <div class="select_option clearfix">
                                    <h4 class="input_title">Color *</h4>
                                    <select>
                                      <option data-display="- Please select -">Choose A Option</option>
                                      <option value="1">Some option</option>
                                      <option value="2">Another option</option>
                                      <option value="3" disabled="">A disabled option</option>
                                      <option value="4">Potato</option>
                                    </select>
                                  </div>
                                </div>
                              </div>
                              <span class="repuired_text">Repuired Fiields *</span>
                            </form>
                          </div>

                          <div class="quantity_wrap">
                            <form action="javascript:;">
                              <div class="quantity_input">
                                <button type="button" class="input_number_decrement">
                                  <i class="fal fa-minus"></i>
                                </button>
                                <input class="input_number" type="text" value="1">
                                <button type="button" class="input_number_increment">
                                  <i class="fal fa-plus"></i>
                                </button>
                              </div>
                            </form>

                            <div class="total_price">
                              Total: $620,99
                            </div>
                          </div>

                          <ul class="default_btns_group ul_li">
                            <li><a class="addtocart_btn" href="">Add To Cart</a></li>
                            <li><a href="#!"><i class="fa-solid fa-arrows-rotate"></i></a></li>
                            <li><a href="#!"><i class="fas fa-heart"></i></a></li>
                          </ul>

                          <ul class="default_share_links ul_li">
                            <li>
                              <a class="facebook" href="#!">
                                <span><i class="fab fa-facebook-square"></i> Like</span>
                                <small>10K</small>
                              </a>
                            </li>
                            <li>
                              <a class="twitter" href="#!">
                                <span><i class="fab fa-twitter-square"></i> Tweet</span>
                                <small>15K</small>
                              </a>
                            </li>
                            <li>
                              <a class="google" href="#!">
                                <span><i class="fab fa-google-plus-square"></i> Google+</span>
                                <small>20K</small>
                              </a>
                            </li>
                            <li>
                              <a class="share" href="#!">
                                <span><i class="fas fa-plus-square"></i> Share</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- product quick view modal - end
        ================================================== -->

        <!-- breadcrumb_section - start
        ================================================== -->
        <div class="breadcrumb_section">
          <div class="container">
            <ul class="breadcrumb_nav ul_li">
              <li><a href="index.html">Home</a></li>
              <li>Product Details</li>
            </ul>
          </div>
        </div>
        <!-- breadcrumb_section - end
        ================================================== -->

        <!-- product_details - start
        ================================================== -->
        <section class="product_details section_space pb-0">
          <div class="container">
            <div class="row">
              <div class="col col-lg-6">
                <div class="product_details_image">
                  <div class="details_image_carousel">
                    <div class="slider_item" th:each="img:${imglist}">
                      <img src="/assets/images/product_details_img_1.webp" th:src="${img}" alt="Getyootech - Gadgets Ecommerce Site Template">
                    </div>
                  </div>

                  <div class="details_image_carousel_nav">
                    <div class="slider_item" th:each="img:${imglist}" >
                      <img src="/assets/images/product_details_img_1.webp"  th:src="${img}" alt="Getyootech - Gadgets Ecommerce Site Template">
                    </div>

                  </div>
                </div>
              </div>

              <div class="col-lg-6">
                <div class="product_details_content">
                  <h2 class="item_title">[[${product.getName()}]]</h2>
                  <input id="pronum" th:value="${product.getId()}" hidden="hidden">
                  <p>
                    [[${product.getInro()}]]
                  </p>
                  <div class="item_price">
                    <span>[[${product.getPrice()}]]</span>
                  </div>

                  <hr>


                  <div class="quantity_wrap">
                    <form action="javascript:;">
                      <div class="quantity_input">
                        <button type="button" class="input_number_decrement">
                          <i class="fal fa-minus"></i>
                        </button>
                        <input id="input_number" class="input_number" type="text" value="1">
                        <button type="button" class="input_number_increment">
                          <i class="fal fa-plus"></i>
                        </button>
                      </div>
                    </form>

<!--                    <div class="total_price">-->
<!--                      Total: $620,99-->
<!--                    </div>-->
                  </div>

                  <ul class="default_btns_group ul_li">
                    <li><a class="addtocart_btn"                       href="JavaScript:;"
                           onclick="addCart()"

                    >加入购物车</a></li>
<!--                    <li><a href="#!"><i class="fa-solid fa-arrows-rotate"></i></a></li>-->
<!--                    <li><a href="#!"><i class="fas fa-heart"></i></a></li>-->
                  </ul>

                </div>
              </div>
            </div>

            <div class="details_information_tab">
              <ul class="tabs_nav nav ul_li" role="tablist">
                <li role="presentation">
                  <button class="active" data-bs-toggle="tab" data-bs-target="#description_tab" type="button" role="tab" aria-controls="description_tab" aria-selected="true">
                    Description
                  </button>
                </li>

              </ul>
              <div class="tab-content">
                <div class="tab-pane fade show active" id="description_tab" role="tabpanel">
                  <div  th:utext="${product.getDes()}"></div>

                </div>


              </div>
            </div>
          </div>
        </section>
        <!-- product_details - end
        ================================================== -->

        <!-- related_products_section - start
        ================================================== -->
        <!-- related_products_section - end
        ================================================== -->

        <!-- newsletter_section - start
        ================================================== -->
        <!-- newsletter_section - end
        ================================================== -->

      </main>
      <!-- main body - end
      ================================================== -->

      <!-- footer_section - start
      ================================================== -->
      <!-- footer_section - end
      ================================================== -->

    </div>
    <!-- body_wrap - end -->

    <!-- fraimwork - jquery include -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/popper.min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/bootstrap5-dropdown-ml-hack.js"></script>

    <!-- carousel - jquery include -->
    <script src="/assets/js/slick.min.js"></script>

    <!-- popup - jquery include -->
    <script src="/assets/js/magnific-popup.min.js"></script>

    <!-- jquery-ui - jquery include -->
    <script src="/assets/js/jquery-ui.js"></script>

    <!-- off canvas sidebar - jquery include -->
    <script src="/assets/js/mCustomScrollbar.js"></script>

    <!-- select option - jquery include -->
    <script src="/assets/js/nice-select.min.js"></script>

    <!-- countdown timer - jquery include -->
    <script src="/assets/js/countdown.js"></script>

    <!-- counter up - jquery include -->
    <script src="/assets/js/counterup.min.js"></script>
    <script src="/assets/js/waypoints.min.js"></script>

    <!-- custom - jquery include -->
    <script src="/assets/js/main.js"></script>
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <script th:inline="javascript">
      function addCart(){
        var flag = [[${@permission.getFlag()}]];
        if(flag==true) {
          layui.use(function () {
            var layer = layui.layer;
            layer.alert("还未登陆，请登陆之后添加！！！")
          })
        }else{
          var value = document.getElementById("input_number").value;
          // console.log(user.primaryPrincipal.userId)
          // console.log(value)
          var text = document.getElementById('pronum').value;

          $.ajax({
            url: "http://localhost/addcart/"+text+"/"+value,
            method: "GET",
            success: function(data){
              // 请求成功时的处理逻
              if(data.code==0){
                layui.use(function () {
                  var layer = layui.layer;
                  layer.alert("添加购物车成功！！！")
                })
              }
              // 在这里你可以处理返回的数据
            },
            error: function(xhr, status, error){
              // 请求失败时的处理逻辑
              console.error(xhr.responseText);
            }
          });


        }
      }


    </script>
  </body>
</html>